<template>
  <el-scrollbar class="scrollbar" :native="false">
    <div class="shop-tree">
      <div class="tree">
        <!-- <el-tree
          ref="tree"
          :props="props"
          :load="loadNode"
          lazy
          node-key="id"
          show-checkbox
          @check-change="handleCheckChange"
        >
        </el-tree> -->
        <el-tree ref="tree" :props="props" :load="loadNode" lazy>
          <div slot-scope="{ node, data }">
            <div class="tree-custom">
              <el-checkbox
                v-if="data.mapX && node.level !== 1"
                style="margin-right: 8px"
                v-model="node.checked"
                @change="handleCheckChange($event, data)"
                >{{ node.label }}</el-checkbox
              >
              <span v-else>{{ node.label }}</span>
            </div>
          </div>
        </el-tree>
      </div>
    </div>
  </el-scrollbar>
</template>
<script>
import { getRepairType } from '../js/repair'
export default {
  data () {
    return {
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'isLeaf'
      },
      data: [],
      checkIds: [],
      nodeObj: null,
      resolveObj: null
    }
  },
  props: {
    planEqptIds: {
      type: Array,
      required: false,
      default: () => []
    },
    activebuildIndex: {
      type: Number,
      default: 0
    },
    activeFloorName: {
      type: String,
      default: ''
    },
    rwoNumberTime: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    activeFloorName (val, val2) {
      if (val !== val2) {
        this.$nextTick(() => {
          this.clearTree()
        })
      }
    },
    rwoNumberTime (val) {
      if (val) {
        this.$nextTick(() => {
          this.nodeObj.childNodes = []
          this.loadNode(this.nodeObj, this.resolveObj)
        })
      }
    }
  },
  methods: {
    // handleCheckChange() {
    // this.checkIds = this.$refs.tree.getCheckedNodes().map((e, index) => {
    //   return {
    //     rwoNumberId: e.value,
    //     rwoNumberName: e.name,
    //     mapX: e.mapX,
    //     mapY: e.mapY,
    //     level: e.level,
    //     index: index + 1
    //   }
    // })
    // console.log(this.checkIds)
    // this.$emit('rwoNumberClick', this.checkIds)
    // },
    // 勾选改变
    handleCheckChange () {
      this.checkIds = this.$refs.tree.getCheckedNodes().map((e, index) => {
        return {
          rwoNumberId: e.value,
          rwoNumberName: e.name,
          mapX: e.mapX,
          mapY: e.mapY,
          index: index + 1
        }
      })
      this.$emit('rwoNumberClick', this.checkIds)
    },
    // 懒加载函数
    loadNode (node, resolve) {
      // let id = node.level === 0 ? 0 : node.key
      if (node.level === 0) {
        this.nodeObj = node
        this.resolveObj = resolve
        this.getRepairType(this.activeFloorName, '').then(res => {
          res.map(obj => {
            obj.level = 1
          })
          return resolve(res)
        })
      } else {
        this.getRepairType(this.activeFloorName, node.data.value).then(res2 => {
          res2.map(obj => {
            obj.isLeaf = true
            obj.level = 2
          })
          return resolve([...res2])
        })
      }
    },
    async getRepairType (floorId, type) {
      const params = {
        straTime: this.rwoNumberTime[0],
        endTime: this.rwoNumberTime[1],
        floorId,
        type
      }
      const { data } = await getRepairType(params)
      return data
    },
    // 清空树的方法
    clearTree () {
      this.nodeObj.childNodes = []
      this.loadNode(this.nodeObj, this.resolveObj) // 再次执行懒加载的方法
    }
  }
}
</script>
<style lang="scss">
// .tree .el-tree-node__expand-icon.expanded {
//   -webkit-transform: rotate(0deg);
//   transform: rotate(0deg);
// }
// .tree .el-icon-caret-right:before {
//   content: '\E602';
//   font-size: 18px;
// }
// .tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
//   content: '\E63c';
//   font-size: 18px;
// }
</style>
